<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>聊天</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="robots" content="all,follow">
    <link rel="stylesheet" href="https://lib.sinaapp.com/js/bootstrap/4.2.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.default.css" id="theme-stylesheet">
    <link rel="stylesheet" href="css/scroller.css">
    <link rel="stylesheet" href="css/my.css">
</head>
<body>
<div class="page login-page">
    <div class="container d-flex align-items-center">
        <div class="form-holder has-shadow">
            <div class="row">
                <!-- Form Panel    -->
                <div class="col-lg-6 bg-white">
                    <div class="form d-flex align-items-center">
                        <div class="content">
                            <button id="delete_record" type="button" class="btn btn-primary" style="float: right">清除聊天记录</button>
                            <h1 id="name_title">聊天</h1>
                            <div class="form-group">
                                <div class="infinity-scroll">
                                    <div class="main-content" id="messageTable">
                                        <!--                                        <div class="item first-item" >1fr</div>-->
                                        <!--                                            -->
                                        <!--                                        <div class="item last-item">30</div>-->
                                        <!--                                        <div class="item" data-items-index="1">2</div>-->
                                    </div>
                                </div>
                            </div>
                            <input id="message" class="input-material" placeholder="在此输入消息"/>
                            <button id="send" type="button" class="btn btn-primary" style="float: right">发送</button>
                            <button id="refresh" type="button" class="btn btn-primary" style="float: right">刷新</button>
                            <br/>
                            <br/>

                            <a href="index.html" class="signup">&nbsp;退出 </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- JavaScript files-->
<script src="https://s1.pstatp.com/cdn/expire-1-M/jquery/1.10.2/jquery.min.js"></script>
<script src="https://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<!-- Main File-->

</body>
</html>
<script src="js/jquery-3.6.0.js" type="text/javascript"></script>
<script>
    let email = sessionStorage.getItem('email');
    let url = sessionStorage.getItem('url');
    let toEmail = sessionStorage.getItem('toEmail');
    let toName = sessionStorage.getItem('toName');
    let toUrl = sessionStorage.getItem('toUrl');
    $("#name_title").html(toName);


    showMsg=function (){
        let data = {}
        data.email = email;
        data.toEmail = toEmail;
        data.action = "get_my_record";
        $.post("./action",data,function(json) {
            json = JSON.parse(json);
            if(json.result === 1 || json.result === "1"){
                let list=json.aaData;
                let html="";
                if(list!==undefined && list.length>0){
                    for(let i=0;i<list.length;i++){
                        let record=list[i];
                        console.log(record);
                        if(record.host===email){
                            html=html+
                                "<div class=\"item \">" +
                                "<img class='chat_profile' src=\""+url+"\" width=\"50\" height=\"50\" alt=''>"+
                                "<div>" +
                                "<div class='msg_content'>"+record.content+"</div>"+
                                "<div class='msg_time'>"+record.time+"</div>"+
                                "</div>"+
                                "</div>";
                        }
                        else if(record.host===toEmail){
                            html=html+
                                "<div class=\"item \">" +
                                "<img class='chat_profile' src=\"/chat"+toUrl+"\" width=\"50\" height=\"50\" alt=''>"+
                                "<div>" +
                                "<div class='msg_content'>"+record.content+"</div>"+
                                "<div class='msg_time'>"+record.time+"</div>"+
                                "</div>"+
                                "</div>";
                        }
                    }
                }
                $("#messageTable").html(html);
            }
            else {
                console.log(json.reason);
            }
        })
    }

    sendMsg=function (){
        let content = $('#message').val();
        if (content===""){
            alert("消息不能为空！");
            return;
        }
        if(content.length > 25){
            alert("消息不能超过25个字！");
            return;
        }
        let data = {}
        data.email = email;
        data.toEmail = toEmail;
        data.content = content;
        data.action = "send_message";
        $.post("./action",data,function(json) {
            console.log(json);
            json = JSON.parse(json);
            if(json.result === 1 || json.result === "1"){
                window.location.reload();
            }
            else {
                alert(json.reason);
            }
        })
    }

    deleteMsg=function (){
        let r = confirm("清除之后对方也将丢失记录，是否清除？");
        if(r){
            let data = {}
            data.email = email;
            data.toEmail = toEmail;
            data.action = "delete_record";
            $.post("./action",data,function(json) {
                console.log(json);
                json = JSON.parse(json);
                if(json.result === 1 || json.result === "1"){
                    window.location.reload();
                }
                else {
                    alert(json.reason);
                }
            })
        }
    }

    showMsg();

    document.getElementById('delete_record').addEventListener('click',deleteMsg);
    document.getElementById('send').addEventListener('click',sendMsg);
    document.getElementById('refresh').addEventListener('click',function (){
        window.location.reload();
    });
</script>